<template>
    <table>
        <tr>
            <td>应用名称</td>
            <td>{{ appSecretData.name }}</td>
        </tr>
        <tr>
            <td>应用类型</td>
            <td>{{ appSecretData.typeName }}</td>
        </tr>
        <tr>
            <td>应用AppID</td>
            <td>{{ appSecretData.appId }}</td>
        </tr>
        <tr>
            <td>应用AppSecret</td>
            <td style="color: #d72e2e">
                <div class="flex justify-between items-center">
                    <span>{{ appSecretData.appSecret }}</span>
                    <jb-btn
                        size="small"
                        icon="mdi:set-center-right"
                        color="#d72e2e"
                        tip-text="变更应用AppSecret"
                        confirm-text="确认变更应用AppSecret？"
                        :url="`/api/admin/app/changeAppSecret/${appSecretData.id}`"
                        @success="refresh"
                        >变更</jb-btn
                    >
                </div>
            </td>
        </tr>
    </table>
</template>
<script setup lang="ts">
import { reactive } from 'vue'
import { JBoltApi } from '@/utils/request'

const props = withDefaults(
    defineProps<{
        row: any
    }>(),
    {}
)
let appSecretData = reactive({
    id: props.row.id,
    name: props.row.name,
    typeName: props.row.typeName,
    appId: props.row.appId,
    appSecret: props.row.appSecret
})
async function refresh() {
    const { error, result } = await JBoltApi.get(`/api/admin/app/${appSecretData.id}`)
    if (error) return
    appSecretData.appSecret = result.data.appSecret
}
</script>
<style scoped>
table {
    border-collapse: collapse;
    width: 100%;
}

th,
td {
    border: 1px solid #e8eaec;
    padding: 8px;
    text-align: center;
}

tr:hover {
    background-color: lightgray;
}
</style>
